<template>
  <div class="login" :style="{height:pageHeight+'px'}">
    <yk-space  style="display: flex;align-items: center;" dir="vertical" :size="24" class="login-container">
      <yk-space dir="vertical" class="title-container">
        <img src="../assets/LOGO.svg" class="logo">
        <span class="name">博客后台登录</span>
      </yk-space>
      <form @submit.prevent="handleLogin" autocomplete="on">
        <yk-space  style="display: flex;align-items: center;" dir="vertical" :size="24">
          <input 
            placeholder="请输入邮箱" 
            v-model="email"
            prefix-icon="user"
            type="text"
            required
            autocomplete="username"
            name="email"
          ></input>
          <input 
            placeholder="请输入密码" 
            v-model="password"
            prefix-icon="lock"
            type="password"
            required
            autocomplete="current-password"
            name="password"
          ></input>
          <div style="width: 70%; display:flex; justify-content: space-between;">
          <yk-button type="primary" native-type="submit" block>登录</yk-button>
          <yk-button type="primary" @click="handleGoToRegister" block >前往注册</yk-button>
          </div>
        </yk-space>
      </form>
    </yk-space>
  </div>
</template>

<script setup lang="ts">
import { ref,getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { loginApi } from '../api/user_api.ts';
import { useCode } from '../hooks/codeHook.ts';
import { useUserStore } from '../stores/user.ts';

const userStore = useUserStore();
const { tackleCode } = useCode();
const router = useRouter();
const proxy:any = getCurrentInstance()?.proxy;

const pageHeight = ref(window.innerHeight);
const email = ref('');
const password = ref('');


// 表单提交处理
const handleLogin = () => {
  if (!email.value || !password.value) {
    proxy.$message({ type: 'warning', message: '请填写完整信息' });
    return;
  }

  const data = {
    email: email.value,
    password: password.value,
  };
  
  loginApi(data).then((res: any) => {
    if (tackleCode(res.data.code)) {
      userStore.$patch(res.data.data);
      proxy.$message({ type: 'success', message: '登录成功' });
      router.push('/overview');
    } else {
      proxy.$message({ type: 'error', message: '账号或者密码错误' });
    }
  });
};

const handleGoToRegister = () => {
  router.push('/register');
};
</script>

<style scoped lang="less">
.login {
  z-index: 1000;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
}

.login-container {
  width: 420px;
  padding: 48px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  animation: slideUp 0.6s ease-out;
}

.title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo {
  width: 100px;
  height: 100px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.name {
  font-size: 28px;
  font-weight: 700;
  color: #2d3748;
  margin: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

form {
  width: 100%;
}

input {
  width: 70%;
  height: 40px;
  padding: 0 @space-l;
  background-color:@bg-color-l;
  color:  @font-color-l;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
  &:focus-within {
    border-color: #667eea;
  }
  
  &:hover {
    border-color: #667eea;
  }
}

.yk-button[type="primary"] {
  border-radius: 12px;
  height: 48px;
  font-weight: 600;
  font-size: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  }
  
  &:active {
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .login-container {
    width: 90%;
    padding: 32px 24px;
    margin: 20px;
  }
  
  .name {
    font-size: 24px;
  }
}
</style>